<template>
  <div class="w">


    <div v-if="!empty">
      <!-- 全选 删除 -->
      <div class="flex-be-center title_select_box">
        <div class="title_select flex-be-center">
          <div class="img_check_box" @click="checkAll">
            <img :src="checkedAll? activeimg.check :activeimg.nocheck" alt="">
          </div>
          <span>全选</span>
        </div>
        <span class="remove_box" @click="remove">删除</span>
      </div>
      <!-- 商品列表 -->
      <div>
        <ul class="list-box">
          <!-- <li class="list-box-item" v-for="(item,index) in cartInfoList" :key="item.id">
            <img @click="ischeck(item,index)" class="list-box-item-radio" :src="item.checked? activeimg.check :activeimg.nocheck" alt="">
            <van-card :num="item.productList[0].count" 
            :price="item.productList[0].price" :desc="item.productList[0].category" 
            :title="item.productList[0].productTitle" 
            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #tags>
                <van-tag plain type="danger">标签</van-tag>
                <van-tag plain type="danger">{{value}}</van-tag>
              </template>
              <template #num>
                <van-stepper v-model="item.productList[0].count" min="1"   disable-input/>
              </template>
            </van-card>
         </li> -->
          <li class="list-box-item" v-for="(item,index) in cartInfoList" :key="index">
            <img @click="ischeck(item.id,item.selected)" class="list-box-item-radio"
              :src="item.selected===1? activeimg.check :activeimg.nocheck" alt="">
            <van-card :num="item.count" :price="price(item)"  :title="item.goods_name"
              thumb="https://img.yzcdn.cn/vant/ipad.jpeg"><!-- :desc="item.goods_price" -->
              <template #num>
                <van-stepper :value="item.goods_num" async-change @change="onChange(item.id,item.goods_num)"
                  v-model="item.goods_num" min="1" disable-input />
              </template>
              <template #desc>
                <span style="margin-left: 0.2rem;">价格：</span><span style="color: rgba(216, 30, 6, 1);">￥{{item.goods_price}}</span>  <span style="margin-left: 0.2rem;">diy价格</span><span style="color: rgba(216, 30, 6, 1);">￥{{item.diy_price}}</span>
              </template>
            </van-card>
          </li>

        </ul>
      </div>
      <!-- 立即结算 -->
      <div>
        <van-submit-bar style="bottom:1rem" text-align="left" :price="allPrice" button-text="提交订单" @submit="onSubmit" />
      </div>


    </div>


    <!-- 空车 -->
    <div v-if="empty">
      快去逛逛吧
    </div>

  </div>
</template>
<style lang="" scoped>
  /* 全选删除 */
  .title_select_box {
    margin-top: 1.7rem;
    margin-bottom: 1.1rem;
    font-size: 0.3rem;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .title_select .img_check_box img {
    width: 0.32rem;
    height: 0.32rem;
    margin-right: 0.2rem;
  }

  /* 列表 */
  .list-box {
    margin-bottom: 2rem;
  }

  .list-box-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .list-box-item .van-card {
    padding-left: 0.2rem;
    /* height: 2rem; */
    flex: 1;

  }

  .list-box-item .van-card__price {
    font-size: 0.3rem;
    font-weight: bold;
    /* margin-top: 0.64rem; */
    color: rgba(216, 30, 6, 1);
  }

  .list-box-item .van-card__title {
    width: 2.97rem;
    height: 0.72rem;
    font-size: 0.26rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    line-height: 0.36rem;

    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

  }

  .list-box-item .list-box-item-radio {
    width: 0.32rem;
    height: 0.32rem;
  }
  .pricetitle{

  }
  .pricea{
    color: rgba(216, 30, 6, 1);
  }    
</style>
<script>
  // 引入弹出框
  import Vue from 'vue';
  import { Dialog } from 'vant';
  import { Toast } from 'vant';
  import getData from '@/assets/js/axios.js'
  import store from '@/store'
  // import { Stepper } from 'vant';


  export default {
    data() {
      return {
        //value: 2000,     
        empty: false,//空车
        checkedAll: false,//全选
        reviseflag: true,//过快点击
        allPrice: 0, // 所有价格
        allShops: 0, // 被选中的商店数量
        //allCount: 0 ,// 被选中的产品数量
        activeid: [],//选中商品id
        activeindex: [],//选中商品下标
        activerattr: [],//选中的商品
        activeimg: {
          check: require("../../assets/img/cart/check.png"),
          nocheck: require("../../assets/img/cart/nocheck.png")
        },
        cartInfoList: [
          // {
          //   id: 1,
          //   shopTitle: '苹果旗舰店', // 商店名
          //   checked: false, // 商店选择的状态
          //   checkedCount: 0, // 此商店被选择的商品数量
          //   productList: [
          //     {
          //       isChecked: false, // 商品选择状态
          //       productTitle: '2019款macbook/苹果/MF893/A国航笔记本', // 产品名
          //       category: '15寸/2.3/8G/256/土豪金/标准套餐',
          //       price:102.00 , // 价格
          //       count: 1 // 数量
          //     }
          //   ]
          // },
          // {
          //   id: 2,
          //   shopTitle: '锤子科技旗舰店',
          //   checked: false,
          //   checkedCount: 0,
          //   productList: [
          //     {
          //       isChecked: false,
          //       productTitle: '锤子手机手感保护膜',
          //       category: '登陆月球',
          //       price: 1.02,
          //       count: 3
          //     },
          //     {
          //       isChecked: false,
          //       productTitle: '锤子手机pro割手版',
          //       category: '128G/割手版',
          //       price: 1790,
          //       count: 3
          //     }
          //   ]
          // }

        ],
      }
    },
    components: {
      //注册弹出框
      [Dialog.Component.name]: Dialog.Component,
    },
    computed: {
      price(){
        return function(e){
          return (Number(e.goods_price)+e.diy_price).toFixed(2)
          // return parseFloat(e.goods_price)+parseFloat(e.diy_price);
        }
      }
    },
    mounted() {
      if (store.state.token) {
        // console.log(store.state.token, 123)
        //获取购物车内容
        getData.cartList().then(req => {
          //console.log(req, "购物车内容")
          //列表
          console.log(req.data,"列表数据")
          this.cartInfoList = req.data.data.goods;
          // console.log(this.cartInfoList, '666')
          //总价
          if (this.cartInfoList == "") {
            this.empty = true;
          } else {
            this.empty = false;
            this.Allprice();
          }
        }).catch(err => {
        })
      } else {
        this.$router.push("/login")
      };


    },
    methods: {
      //立即结算
      onSubmit() {
        if (this.activeindex.length != 0) {
          this.$router.push("/suborder?settle_type=" + 0);
        } else {
          Toast("请选择")
        }
        //activerattr选中的商品

        // this.$router.push('/classify?id='+ a)
      },
      //修改数量
      onChange(id, value) {

        //  //console.log(id,num,"数量啊")
        //Toast.loading({ forbidClick: true });
        var para = {
          "id": id,
          "goods_num": value
        };
        getData.cartNum_set(para).then(req => {
          console.log(req, "修改了11    zjy  修改数量");
          this.Allprice()
          //列表    
        }).catch(err => {
        });
        setTimeout(() => {
          // Toast.clear();
          // 注意此时修改 value 后会再次触发 change 事件
          this.value = value;

        }, 500)

      },
      //选中不选中
      //选中单个商品
      ischeck(id, flagnum, c) {
        ////console.log(item,"选中");
        if (flagnum == 0) {
          flagnum = 1;
          //this._checkTrue();
        } else {
          flagnum = 0;
          //this._checkFalse();
        };
        var para = {
          "id": id,
          "type": c,
          "selected": flagnum

        };
        getData.cartSelected(para).then(req => {
          console.log(req, "修改了11   zjy  选中了单个商品吗");
          this.cartInfoList = req.data.data.goods;
          //总价
          this.Allprice();
        }).catch(err => {

        })
      },
      //总价计算
      Allprice() {
        this.allPrice = 0;
        this.allShops = 0;
        this.activeid = [];
        this.activeindex = [];
        let allLength = this.cartInfoList.length;
        let checknum = 0;
        this.cartInfoList.forEach((item, index) => {
          if (item.selected === 1) {
            //console.log(item,"内容");
            ++checknum;
            this.allShops++;
            //console.log(index,3636)
            this.activeid.push(item.id);
            this.activeindex.push(index);
            this.allPrice += (Number(item.goods_price)+item.diy_price) * item.goods_num * 100;
          };

        });
        if (allLength == checknum) {
          this.checkedAll = true;
        } else {
          this.checkedAll = false;
        }
      },
      //选中全部
      checkAll() {
        ////console.log("全部的")
        let anum;
        if (this.checkedAll) {
          anum = 0;
          this.checkedAll = false;
        } else {
          anum = 1
          this.checkedAll = true;
        };
        var para = {
          "type": anum,
        };
        getData.cartSelected(para).then(req => {
          //console.log(req, "修改了11");
          this.cartInfoList = req.data.data.goods;
          //总价
          this.Allprice();
        }).catch(err => {

        })

      },
      // 删除
      remove() {
        if (this.allShops === 0) {
        } else {
          Dialog.confirm({
            title: '标题',
            message: '是否删除',
          }).then(() => {
            var id = this.activeid.toString();
            //var id=22;
            //console.log(id,66611)
            var para = {
              id
            };
            getData.cartDel(para).then(res => {
              console.log(res,"删除商品")
              if (res.data.data) {
                Toast('删除成功');
                ////console.log( this.activeindex,"商品下标");
                // this.cartInfoList;商品列表
                //  this.activeindex.forEach(item=>{
                //    //console.log(item,66662222)
                //    this.cartInfoList.splice(item,1)
                //  })
                var list = this.activeindex;
                //console.log(list,list[list.length-1],list.length,"suzhu");
                for (var i = list.length - 1; i >= 0; i--) {
                  //console.log(list[i],3333);
                  this.cartInfoList.splice(list[i], 1);
                };
                if (this.cartInfoList.length === 0) {
                  this.empty = true;
                };
                this.allPrice = 0;
                //总价
                // this.Allprice();
                //console.log(this.cartInfoList,"xianzia");

              }
            }).catch(err => {

            })


          })
            .catch(() => {
              // on cancel
              Toast('删除失败');
            });

        }

      },

    },
    watch: {

    }



  }


</script>